<!--
 * @Descripttion:
 * @Author: 张明尧
 * @Date: 2020-10-26 14:52:28
 * @LastEditTime: 2021-01-27 16:43:55
-->
<template>
  <div class="payFormula padding-top-10">
    <el-row class="borderShow">
      <el-col :span="18">
        <div
          :style="['GJZB'].includes(params.calcType) && 'height: 500px'"
          class="pay-left-main"
        >
          <div
            id="add-content"
            :style="input_btns.length > 0 && 'height: 200px' || 'height: 350px'"
            class="textareaDiv position-relative"
          >
            <span v-if="group_datas.length > 0">
              <span
                v-for="(item, index) in group_datas"
                :key="index"
                style="font-size: 14px;color: #f19720;display: inline-block"
                class="cursor-pointer-hover margin-left-5 margin-right-5 position-relative"
              >
                <span
                  @click="inputBtn(item, index)"
                  v-if="item.code == 'pay-btn'"
                >
                  <span v-if="item.type != 'basics'">[ {{ item.name }} ]</span>
                  <span v-else>{ {{ item.name }} }</span>
                </span>
                <span
                  v-if="item.code != 'pay-btn' && !item.numberCode"
                  @click="inputBtn(item,index)"
                  class="computeBtnClass"
                  style="font-size: 16px;color: #3f3f3f; padding: 0 2px;height: 20px"
                >{{ item.name }}</span>
                <!-- 单独处理的数字运算符 -->
                <span
                  v-if="item.code != 'pay-btn' && item.numberCode"
                  class="computeBtnClass position-relative"
                  style="font-size: 16px; padding: 0 2px;height: 20px"
                >
                  <span
                    @click="inputBtn(item,index)"
                    style="color: #3f3f3f;"
                  >{{ item.value }}</span>
                  <div
                    v-if="item.showCalc"
                    class="computeBtn_input"
                  >
                    <el-input
                      v-model="item.value"
                      readonly
                      clearable
                      placeholder=""
                    />
                    <!-- 快捷的计算按钮 -->
                    <div
                      v-for="(bum_btn, _bum_btn) in numberValue.arr"
                      :key="_bum_btn"
                    >
                      <el-col
                        :span="8"
                        v-for="(btn_key, _btn_key) in bum_btn"
                        :key="_btn_key"
                        class="text-status-center"
                      >
                        <el-button @click="numberCalc(btn_key, item)">{{ btn_key }}</el-button>
                      </el-col>
                      <el-col
                        :span="8"
                        v-if="_bum_btn == numberValue.arr.length -1"
                        class="text-status-center"
                      >
                        <el-button
                          @click="numberDelete(item)"
                        ><i class="jeicon jeicon-delete-o" /></el-button>
                      </el-col>
                      <el-col
                        :span="24"
                        v-if="_bum_btn == numberValue.arr.length -1"
                        class="text-status-center"
                      >
                        <el-button
                          @click="numberCalcOk(item)"
                          style="width: 100%"
                          type="primary"
                        >确定</el-button>
                      </el-col>

                    </div>
                  </div>
                </span>
                <input
                  @focus="inputBtn(item, index)"
                  :id="`${item.idOnlay}`"
                  class="widthInput"
                  type="text"
                >
              </span>
            </span>
            <textarea
              @input="gs_textarea = ''"
              v-model="gs_textarea"
              v-else
              placeholder="请输入计算公式"
              class="noDataInput"
              style="ime-mode:disabled"
            />
            <div
              v-if="group_datas.length > 0"
              @click="clearPayformula"
              class="clearPayformula"
            >
              <i class="jeicon jeicon-trash-o" />
              一键清空
            </div>
          </div>
          <div
            style="height: 40px;line-height: 40px"
            class="margin-top-10"
          >
            <el-button
              @click="GS_JS()"
              type="primary"
            >
              公式校验
            </el-button>
            <span
              v-if="dangerText.show"
              :style="dangerText.text!='通过' && 'color: #EF4D4D' || 'color: rgb(0,166,90)'"
              class="dangerText font-size-14 margin-left-10"
            >
              {{ dangerText.text }}
            </span>
          </div>
          <div class="margin-top-20 computeSign">
            <span class="font-weight-600 font-size-14 margin-right-10">快捷运算符</span>
            <el-button
              @click="computeClick(btn, index)"
              v-for="(btn,index) in computeSign"
              :key="index"
              plain
            >
              {{ btn.name }}
            </el-button>
            <span
              v-if="!['GJZB'].includes(params.calcType)"
              class="margin-left-10"
            >
              <el-checkbox
                @change="decimalsCalcCheckedChange"
                v-model="decimalsCalcChecked"
              >保留小数位数</el-checkbox>
              <el-input-number
                v-if="decimalsCalcChecked"
                :disabled="!decimalsCalcChecked"
                v-model="decimalsCalc"
                :min="0"
                style="width: 90px;"
                class="margin-left-10"
                size="small"
                controls-position="right"
              />
            </span>
          </div>
          <div
            v-if="input_btns.length > 0"
            class="margin-top-20 searchBtn"
          >
            <el-row>
              <el-col :span="12">
                <div>
                  <span class="font-size-14 font-weight-600">点击选择薪资字段</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="text-status-right">
                  <el-input
                    @input="searchInputChnage"
                    v-model="searchInput"
                    clearable
                    placeholder="搜索"
                  >
                    <i
                      slot="prefix"
                      class="el-input__icon el-icon-search"
                    />
                  </el-input>
                </div>
              </el-col>
            </el-row>
            <div
              v-if="search_input_btns.length > 0"
              class="payFormula-btn"
            >
              <el-button
                @click="payBtnClick(payBtn, _index)"
                v-for="(payBtn, _index) in search_input_btns"
                :key="_index"
                :style="_index % 5 == 0 && 'margin-left: 0'"
                class="textOmit"
                style="width: 19%"
                plain
              >
                <span
                  v-html="filter_searchColor(searchInput, payBtn.name)"
                />
              </el-button>
            </div>
            <div
              v-else
              class="payFormula-btn"
            >
              <el-button
                @click="payBtnClick(payBtn, _index)"
                v-for="(payBtn, _index) in input_btns"
                :key="_index"
                :style="_index % 5 == 0 && 'margin-left: 0'"
                class="textOmit"
                style="width: 19%"
                plain
              >
                <span>
                  {{ payBtn.name }}
                </span>
              </el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div
          :style="['GJZB'].includes(params.calcType) && 'height: 500px'"
          class="pay-right-main"
        >
          <div class="font-weight-600 font-size-13">
            数据项
          </div>
          <div class="margin-top-10">
            <el-input
              @input="searchBasicsChange"
              v-model="searchBasics"
              clearable
              placeholder="搜索"
            >
              <i
                slot="prefix"
                class="el-input__icon el-icon-search"
              />
            </el-input>
          </div>
          <div
            v-if="warningText"
            class="text-status-center margin-top-15 font-size-16 color-BEBEBE"
          >
            {{ warningText }}
          </div>
          <div
            v-else
            class="padding-top-10"
            style="height: 470px; overflow-y: auto; "
          >
            <el-tree
              ref="treeSelect"
              :data="treeSelect"
              :props="defaultProps"
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
            />
            <!-- <div v-if="search_SJX_btns.length > 0">
              <div
                v-for="(payBtn, _index) in search_SJX_btns"
                :key="_index"
                class="margin-top-10 font-size-14 padding-LR-5 padding-TB-5"
              >
                <span
                  @click="payBtnClick(payBtn, _index)"
                  v-html="filter_searchColor(searchBasics, payBtn.name)"
                  class="pay-right-btn"
                />
              </div>
            </div>
            <div v-else>
              <div
                v-for="(payBtn, _index) in SJX_btns"
                :key="_index"
                class="margin-top-10 font-size-14 padding-LR-5 padding-TB-5"
              >
                <span
                  @click="payBtnClick(payBtn, _index)"
                  class="pay-right-btn"
                >
                  {{ payBtn.name }}
                </span>
              </div>
            </div> -->
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="subBtn margin-top-20 text-status-center">
      <el-button
        @click="sub_saveCalculateFormula"
        type="primary"
      >
        <i class="fa fa-check" /> 确定
      </el-button>
      <el-button
        @click="sub_saveCalculateFormula_close"
        style="color: #3f3f3f;background: #f4f4f4; border: 1px solid #ddd"
        type="primary"
      >
        <i class="fa fa-close" /> 取消
      </el-button>
    </div>
  </div>
</template>

<script>
import { selectBasics } from './action/fetch.js';
import fetch from '../../static/js/common';

export default {
  props: {
    params: {
      type: Object,
      default: () => ({}),
    },
    callback: {
      type: Function,
    },
  },
  data() {
    return {
      gs_textarea: '', // textarea的输入框的内容
      dangerText: {
        text: '',
        show: false,
      }, // 公式校验的报错提示
      warningText: '', // 没有薪资组ID或者没有数据的提示消息
      computeBtnShow: false, // 当前删除的是否是运算符号
      textarea: [], // 当前插入的输入内容
      searchInput: '',
      searchBasics: '', // 搜索基础内容
      focus_index: -1, // 当前光标所在的下标
      group_datas: [], // 当前输入框对应的数据ID，用来判断公式校验和后台传值
      clickDomID: '', // 当前光标点击的DOM的id
      input_btns: [],
      search_input_btns: [], // 搜索后的内容
      SJX_btns: [], // 右侧基础数据项的查询数据
      search_SJX_btns: [], // 右侧基础数据项的查询数据--搜索数据
      computeSign: [
        {
          name: '+',
          code: 'compute',
          id: 'compute-1',
        },
        {
          name: '-',
          code: 'compute',
          id: 'compute-2',
        },
        {
          name: '*',
          code: 'compute',
          id: 'compute-3',
        },
        {
          name: '/',
          code: 'compute',
          id: 'compute-4',
        },
        {
          name: '(',
          include_style: true, // 是否是在内容里面添加东西
          type: 'left',
          code: 'compute',
          id: 'compute-5',
        },
        {
          name: ')',
          include_style: true, // 是否是在内容里面添加东西
          type: 'right',
          code: 'compute',
          id: 'compute-6',
        },
        {
          name: '%',
          code: 'compute',
          id: 'compute-7',
        },
        {
          name: '0.00',
          value: '0.00',
          code: 'compute',
          numberCode: true, // 当前属于数字按钮
          showCalc: true,
          id: 'compute-8',
        },
      ],
      decimalsCalcChecked: false, // 四舍五入是否选中
      decimalsCalc: 0, // 小数精确位数
      numberValue: {
        value: '0.00',
        arr: [
          ['7', '8', '9'],
          ['4', '5', '6'],
          ['1', '2', '3'],
          ['0', '.'],
        ],
      },
      treeSelect: [], // 树形数据的存储
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
  created() {
    this.getSelectBasics(); // 获取基础查询类型
  },
  mounted() {
    const that = this;
    const content = document.getElementById('add-content'); // 根据id选择器选中对象}
    content.onkeydown = function (e) {
      const ev = e || window.event;// 获取event对象
      if (ev.keyCode != 8) {
        ev.returnValue = false;
      } else {
        // eslint-disable-next-line no-lonely-if
        that.init_GSJY(); // 每次执行操作后都重置校验
        if (that.clickDomID) {
          const index = that.group_datas.findIndex(res => res.idOnlay == that.clickDomID);
          that.group_datas = that.group_datas.filter(res => res.idOnlay != that.clickDomID);
          if (index > 0) {
            that.inputBtn(that.group_datas[index - 1], index - 1);
            that.clickDomID = that.group_datas[index - 1].idOnlay;
          }
        }
      }
    };
  },
  methods: {
    // 一键清空
    clearPayformula() {
      this.init_GSJY();
      this.group_datas = [];
      this.focus_index = -1;
    },
    // 数据回显的问题
    filter_backData(data) {
      if (!data) return;
      // 保留小数位数的回显
      if (this.params.modelData.XCJSGZ_BLXSWS) {
        this.decimalsCalcChecked = true;
        this.decimalsCalc = this.params.modelData.XCJSGZ_BLXSWS;
      } else {
        this.decimalsCalcChecked = false;
        this.decimalsCalc = this.params.modelData.XCJSGZ_BLXSWS;
      }
      const filter_data = JSON.parse(data);
      filter_data.forEach((res, fil_res) => {
        this.input_btns.forEach((filrr) => {
          const obj = JSON.parse(JSON.stringify(filrr));
          if (obj.id === res) {
            if (this.group_datas.find(fin => fin.idOnlay == `${obj.id}_${new Date().getTime()}`)) {
              obj.idOnlay = `${obj.id}_${new Date().getTime() + 31}`;
            } else {
              obj.idOnlay = `${obj.id}_${new Date().getTime()}`;
            }
            this.group_datas.push(obj);
          }
        });
        this.treeSelect.forEach((filrr) => {
          if (filrr.children.length > 0) {
            filrr.children.forEach((tree_fil) => {
              tree_fil.id === res && (tree_fil.idOnlay = `${tree_fil.id}_${new Date().getTime()}`) && this.group_datas.push(tree_fil);
            });
          }
        });
        this.computeSign.forEach((filrr) => {
          const obj = JSON.parse(JSON.stringify(filrr));
          if (obj.name === res) {
            if (this.group_datas.find(fin => fin.idOnlay == `${obj.id}_${new Date().getTime()}`)) {
              obj.idOnlay = `${obj.id}_${new Date().getTime() + 33}`;
            } else {
              obj.idOnlay = `${obj.id}_${new Date().getTime()}`;
            }
            this.group_datas.push(obj);
          }
        });
        // 单独区分判断是否是计算器属性
        const reg = /^[0-9]+.?[0-9]*$/;
        if (reg.test(res) && res != '0.00') {
          const computeNumberCode = {
            name: '0.00',
            value: res,
            code: 'compute',
            idOnlay: `compute-8_${new Date().getTime()}_${fil_res}`,
            numberCode: true, // 当前属于数字按钮
            showCalc: false,
            id: 'compute-8',
          };
          this.group_datas.push(computeNumberCode);
        }
      });
    },
    // 根据字符显示颜色
    filter_searchColor(val, text) {
      // 如果不存在关键字 直接返回
      if (!val) return text;
      let html = '';
      const textArr = text.split('');
      textArr.forEach((res) => {
        if (val.includes(res)) {
          html += `<span style="color: #40B8FF">${res}</span>`;
        } else {
          html += res;
        }
      });
      return html;
    },
    // 树形的搜索过滤事件
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 树形点击事件
    handleNodeClick(data) {
      if (data && data.nodeEl == 'parent') return;
      this.payBtnClick(data);
    },
    // 获取快速查询薪资计算字段
    getSelectBasics() {
      // /je/emolument/selectBasics
      selectBasics({ url: this.params.calcType == 'GJZB' && '/je/formulaScoreCard/selectBasics' || '/je/emolument/selectBasics' }).then((res) => {
        if (res.children.length > 0) {
          this.warningText = ''; // 清空警告的提示信息
        } else {
          this.warningText = '暂无数据'; // 清空警告的提示信息
        }
        this.treeSelect = [];
        res.children.forEach((tree_res) => {
          const obj = {
            children: [],
          };
          obj.label = tree_res.text;
          obj.nodeEl = 'parent';
          if (tree_res.children.length > 0) {
            tree_res.children.forEach((tree_data) => {
              const tree_obj = {
                label: tree_data.text,
                name: tree_data.text,
                code: 'pay-btn',
                type: 'basics',
                id: tree_data.id,
              };
              obj.children.push(tree_obj);
            });
          }
          this.treeSelect.push(obj);
        });
        return true;
      }).then((dd) => {
        // 如果不是关键指标才获取基础项
        if (!['GJZB'].includes(this.params.calcType)) {
          this.getSelectCalculateRule(); // 获取基础的数据项
        } else {
          this.filter_backData(this.params.modelData.filterFormula);
        }
      });
    },
    // 薪资组的计算值
    numberCalc(number, data) {
      if (data.value == '0.00') {
        data.value = number;
      } else {
        data.value += number;
      }
    },
    // 薪资组计算值的确认按钮
    numberCalcOk(data) {
      data.showCalc = false;
    },
    // 薪资组计算的删除按钮
    numberDelete(data) {
      if (data.value != '0.00') {
        data.value = data.value.substring(0, data.value.length - 1);
      }
      data.value == '' && (data.value = '0.00');
    },
    // 获取数据项的计算数据
    getSelectCalculateRule() {
      this.fetch_active({
        HR_XCGL_XZZ_ID: this.params.modelData.HR_XCGL_XZZ_ID || this.params.modelData.HR_XCGL_XCJSGZ_JCSJ_ID,
        HR_XCGL_XCJSGZ_ID: this.params.modelData.HR_XCGL_XCJSGZ_ID,
      }, this.params.postPath.rulePort).then((res) => {
        if (!res.success) {
          return this.$message(res.message);
        }
        this.input_btns = res.rows.filter((data) => {
          data.name = data.XCJSGZ_MC;
          data.code = 'pay-btn';
          data.id = data.XCJSGZ_GSBM;
          return data;
        });
        this.filter_backData(this.params.modelData.XCJSGZ_QDSYGS);
      });
    },
    // 公式的校验
    GS_JS() {
      // 如果没有进行输入编辑
      if (this.group_datas.length == 0) {
        this.dangerText.show = true;
        this.dangerText.text = '请先编辑您的公式';
        return;
      }
      // 如果只有一条数据并且是一个公式
      if (this.group_datas.length == 1 && this.group_datas[0].code == 'pay-btn') {
        this.dangerText.show = true;
        this.dangerText.text = '通过';
        return;
      }
      // 如果第一条是运算符并且不是 （） 抛出报错
      if (this.group_datas[0].code == 'compute' && !this.group_datas[0].numberCode && !this.group_datas[0].include_style) {
        this.dangerText.show = true;
        this.dangerText.text = '公式禁止第一个内容是运算符';
        return;
      }
      // 如果最后一个运算符不是 （）
      if (this.group_datas[this.group_datas.length - 1].code == 'compute' && !this.group_datas[this.group_datas.length - 1].numberCode && !this.group_datas[this.group_datas.length - 1].include_style) {
        this.dangerText.show = true;
        this.dangerText.text = '公式禁止最后一个内容是运算符';
        return;
      }
      // 若果（）不齐全的话
      const lefts = this.group_datas.filter(left => left.type == 'left');
      const rights = this.group_datas.filter(right => right.type == 'right');
      if (lefts.length != rights.length) {
        this.dangerText.show = true;
        this.dangerText.text = "运算符号 '(' 和 ') 不匹配";
        return;
      }
      try {
        // 数据长度大于一条数据的情况
        this.group_datas.forEach((res, index) => {
          const index_0 = this.group_datas[index - 1] || '';
          const index_1 = this.group_datas[index + 1] || '';
          const index_2 = this.group_datas[index + 2] || '';
          const pay_btn_number = res.code == 'pay-btn' || res.numberCode; // 是字段和计算数字
          const pay_btn_number_1 = index_1.code == 'pay-btn' || index_1.numberCode; // 是字段和计算数字
          // 判断（）中是否有内容
          if (res.type == 'left' && index_1.type == 'right') {
            this.dangerText.show = true;
            this.dangerText.text = "'(' 和 ')'中需要添加公式内容";
            throw Error();
          }
          // 如果（）中的最后一个字符是运算符
          if (res.type == 'right' && !index_0.include_style && index_0.code == 'compute' && !index_0.numberCode) {
            this.dangerText.show = true;
            this.dangerText.text = " ')' 之前的内容不能为运算符号";
            throw Error();
          }
          // 如果（）中的后面不是运算符
          if (res.type == 'right' && pay_btn_number_1) {
            this.dangerText.show = true;
            this.dangerText.text = ` ')' 和 ${index_1.value || index_1.name} 之前需要运算符`;
            throw Error();
          }
          // 判断（）中后面第一个是否为运算符
          if (res.type == 'left' && index_1.code == 'compute' && !index_1.numberCode && !index_1.include_style) {
            this.dangerText.show = true;
            this.dangerText.text = "'(' 后不能为运算符";
            throw Error();
          }
          // 判断公式（）之前和内容之前是否有运算符
          if (pay_btn_number && index_1.type == 'left') {
            this.dangerText.show = true;
            this.dangerText.text = `#${res.value || res.name}# 和 '(' 之间需要运算符`;
            throw Error();
          }
          // 循环数据先判断快速选择的数据之前是否有运算符
          if (pay_btn_number && pay_btn_number_1) {
            this.dangerText.show = true;
            this.dangerText.text = `#${res.value || res.name}# 和 #${index_1.value || index_1.name}# 之间需要运算符`;
            throw Error();
          }
          // 如果嵌套多层()判断最后一个是否是运算符
          if (pay_btn_number && index_1.code == 'compute' && !index_1.numberCode
          && !index_1.include_style && index_2 && !index_2.numberCode
           && !index_2.include_style && index_2.code != 'pay-btn') {
            this.dangerText.show = true;
            this.dangerText.text = `#${res.value || res.name}# 和 ${index_1.value || index_1.name} 后面计算内容有误`;
            throw Error();
          }
          // 循环判断是否两个运算符重叠
          if (res.code == 'compute' && !res.numberCode && !index_1.numberCode && !res.include_style
           && index_1.code == 'compute' && !index_1.include_style) {
            this.dangerText.show = true;
            this.dangerText.text = `"${res.value || res.name}" 和 "${index_1.value || index_1.name}" 只能使用一个运算符`;
            throw Error(this.dangerText);
          }
          // 如果循环到最后一步 没有后续的对比了 直接跳出通过
          if (this.group_datas.length == index + 1) {
            this.dangerText.show = true;
            this.dangerText.text = '通过';
            throw Error();
          }
        });
      } catch (e) {

      }
      // 通过全部的判断之后
      if (!this.dangerText.show) {
        this.dangerText.show = true;
        this.dangerText.text = '通过';
      }
    },
    // 确定提交公式策略
    sub_saveCalculateFormula() {
      // 先进行公式检测
      if (this.dangerText.text !== '通过') {
        this.GS_JS();
      }
      if (this.dangerText.text !== '通过') return;
      let formula = '';
      let realityFormula = '';
      const filterFormula = [];
      this.group_datas.forEach((data) => {
        if (data.type === 'basics') {
          formula += `{${data.name}}`;
          realityFormula += `{${data.id}}`;
        } else {
          data.code == 'pay-btn' && (formula += `[${data.name}]`) || (formula += `${data.value || data.name}`);
          data.code == 'pay-btn' && (realityFormula += `[${data.id}]`) || (realityFormula += `${data.value || data.name}`);
        }
        data.code == 'compute' && filterFormula.push(data.value || data.name) || filterFormula.push(data.id);
      });
      let postData = {};
      if (['GJZB'].includes(this.params.calcType)) {
        postData = Object.assign(this.params.modelData, {
          formula,
          realityFormula,
          filterFormula: JSON.stringify(filterFormula),
          reserveDecimals: this.decimalsCalcChecked && this.decimalsCalc || '0', // 保留小数位数
        });
      } else {
        postData = {
          HR_XCGL_XCJSGZ_ID: this.params.modelData.HR_XCGL_XCJSGZ_ID || this.params.modelData.HR_XCGL_XCJSGZ_JCSJ_ID || '',
          formula,
          realityFormula,
          filterFormula: JSON.stringify(filterFormula),
          reserveDecimals: this.decimalsCalcChecked && this.decimalsCalc || '0', // 保留小数位数
        };
      }
      this.fetch_active({ ...postData }, this.params.postPath.savePort).then((res) => {
        if (res.success) {
          this.callback && this.callback();
        } else {
          this.$message.success(res.message);
        }
      });
    },
    // 点击小数点精确位数
    decimalsCalcCheckedChange(val) {
      !val && (this.decimalsCalc = 0);
    },
    // 点击取消关闭弹出框
    sub_saveCalculateFormula_close() {
      this.callback && this.callback();
    },
    // 组合的按钮筛选
    searchInputChnage(val) {
      this.search_input_btns = this.input_btns.filter(res => res.name.includes(val));
    },
    // 基础组合的筛选
    searchBasicsChange(val) {
      this.$refs.treeSelect.filter(val);
      // this.search_SJX_btns = this.SJX_btns.filter(res => res.name.includes(val));
    },
    // 初始化校验规则
    init_GSJY() {
      this.dangerText.show = false;
      this.dangerText.text = '';
    },
    payBtnClick(item, index) {
      const obj = JSON.parse(JSON.stringify(item));
      obj.idOnlay = `${obj.id}_${new Date().getTime()}`;
      this.init_GSJY(); // 每次执行操作后都重置校验
      if (this.focus_index >= 0) {
        this.group_datas.splice(this.focus_index + 1, 0, obj);
        this.focus_index += 1; // 让下标定位到添加的元素后面
        return;
      }
      this.group_datas.push(obj);
      this.focus_index = this.group_datas.length - 1; // 光标直接定位到最后的位置
    },
    // 点击运算符号
    computeClick(item, index) {
      // 如果点击 （）的特殊符号
      if (item.include_style) {
        this.type_computeClick();
        return;
      }
      const obj = JSON.parse(JSON.stringify(item));
      obj.idOnlay = `${obj.id}_${new Date().getTime()}`;
      this.init_GSJY(); // 每次执行操作后都重置校验
      if (this.focus_index >= 0) {
        this.group_datas.splice(this.focus_index + 1, 0, obj);
        this.focus_index += 1; // 让下标定位到添加的元素后面
        return;
      }
      this.group_datas.push(obj);
      this.focus_index = this.group_datas.length - 1; // 光标直接定位到最后的位置
    },
    // 运算符号点击的 特殊的 （）
    type_computeClick() {
      const obj_left = {
        name: '(',
        include_style: true, // 是否是在内容里面添加东西
        type: 'left',
        code: 'compute',
        id: 'compute-5',
      };
      const obj_right = {
        name: ')',
        include_style: true, // 是否是在内容里面添加东西
        type: 'right',
        code: 'compute',
        id: 'compute-6',
      };
      obj_left.idOnlay = `${obj_left.id}_${new Date().getTime()}`;
      obj_right.idOnlay = `${obj_right.id}_${new Date().getTime()}`;
      this.init_GSJY(); // 每次执行操作后都重置校验
      if (this.focus_index >= 0) {
        this.group_datas.splice(this.focus_index + 1, 0, obj_left);
        this.group_datas.splice(this.focus_index + 2, 0, obj_right);
        this.focus_index += 1; // 让下标定位到添加的元素后面
        return;
      }
      this.group_datas = [...this.group_datas, obj_left, obj_right];
      this.focus_index = this.group_datas.length - 2; // 光标直接定位到最后的位置
    },
    // 接口动态使用 -- 查询薪资组下计算规则
    fetch_active(param, path) {
      return fetch(path, {}, {
        type: 'post',
        isFormSubmit: true,
        data: param,
        contentType: 'application/x-www-form-urlencoded',
      })
        .then(data => data)
        .catch();
    },
    inputBtn(item, index) {
      const el_input = document.getElementById(item.idOnlay);
      el_input.focus();
      if (item.numberCode) {
        this.group_datas.forEach((calc) => {
          calc.idOnlay != item.idOnlay && (calc.showCalc = false);
        });
        item.showCalc = true;
        function otherClickCalc(e) {
          const add_content = document.getElementById('add-content');
          if (!add_content.contains(e.target)) {
            item.showCalc = false;// 点击其他区域关闭
            document.removeEventListener('click', otherClickCalc, false);
          }
        }
        document.addEventListener('click', otherClickCalc, false);
      }
      this.clickDomID = item.idOnlay;
      this.focus_index = index; // 当前光标所在的下标
    },
  },
};
</script>
<style lang="scss">
@import "./style/index.scss";
.payFormula {
  .el-tree-node__children {
    .el-tree-node__label {
      font-weight: 400;
    }
  }
  .computeBtn_input {
    .el-input__inner {
      height: 30px;
    }
    .el-button {
      box-sizing: border-box;
      margin-top: 10px;
      width: 90%;
    }
  }
  .el-tree-node__label {
    font-weight: bold;
  }
  .subBtn {
    .el-button {
      color: #fff;
      background: #386bd0;
      width: 75px;
      height: 33px;
      padding: 0!important;
    }
  }
  .computeSign {
    height: 35px;
    line-height: 35px;
     .el-button {
       padding: 5px 10px;
    }
  }
  .payFormula-btn {
    overflow-y: auto;
    height: 230px;
    padding-bottom: 10px;
    margin-top: 10px;
    .el-button {
      margin-top: 15px;
      margin-left: 1%;
      height: 40px;
    }
  }
  .pay-right-main {
    .el-input {
      font-size: 13px;
    }
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-input__icon {
      line-height: 30px;
    }
  }
  .searchBtn {
    .el-input {
      width: 50%;
      font-size: 13px;
    }
    .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-input__icon {
      line-height: 30px;
    }
  }
}
</style>
<style lang="scss" scoped>
.payFormula {
  height: 100%;
  background: #fff;
  .textareaDiv {
    height: 200px;
    border: 1px solid #EDEDED;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    .computeBtn_input {
      position: absolute;
      // bottom: -320px;
      width: 250px;
      background: #fff;
      border-radius: 3px;
      box-shadow: 0 1px 12px 0 rgba(0,0,0,.1);
      padding: 10px;
      z-index: 2;
      cursor: auto;
      &:before {
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        top: -5px;
        left: 20px;
        overflow: hidden;
        pointer-events: none;
        transform: rotate(45deg);
        background: #fff;
        box-shadow: -1px 0px 1px -1px rgba(0, 0, 0, 0.1)
      }
      &:after {
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        left: 20px;
        overflow: hidden;
        pointer-events: none;
        transform: rotate(45deg);
        top: -5px;
        background: #fff;
      }
    }
    .clearPayformula {
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: #386bd0;
      font-size: 14px;
      cursor: pointer;
      i {
        font-size: 14px;
      }
    }
    .widthInput {
      border: none;
      width: 5px;
      height: 100%;
      position: absolute;
      right: -5px;
      line-height: 20px;
    }
    .noDataInput {
      width: 100%;
      height: 100%;
      border: none;
      resize:none;
      &::-webkit-input-placeholder {
        /* WebKit browsers */
        /* placeholder颜色  */
        color: rgb(175,175,175);
        /* placeholder字号  */
        font-size: 14px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      &::-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: rgb(175,175,175);
        font-size: 14px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      &::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: rgb(175,175,175);
        font-size: 14px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      &::-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: rgb(175,175,175);
        font-size: 14px;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
    }
    &:hover {
      cursor: auto;
    }
  }
  .borderShow {
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
  }
  .pay-left-main {
    height: 620px;
    padding: 20px 40px;
    border-right: 1px solid #ededed;
    .searchBtn {
      line-height: 30px;
    }
  }
  .pay-right-main {
    padding: 20px 30px;
    height: 620px;
    .pay-right-btn {
      &:hover {
        color: #409EFF;
        cursor: pointer;
      }
    }
  }
}
</style>
